// 定义自定义指令
export const pictureerror = {
  install(Vue) {
    Vue.directive('pictureerror', {
      // inserted 钩子函数 当dom节点挂载后会执行
      // dom 当前指令所在的dom对象
      // options 指令传过来的对象 options.value 可以获取传过来的值
      inserted(dom, options) {
        // 后台传来的可能是null onerror事件不会触发
        dom.src = dom.src || options.value // 判断是否有默认值
        // 判断指令所在标签是否在img上
        if (dom.nodeName === 'IMG') {
        // onerror 图片错误事件 当图片src值出错时自动触发此事件
          dom.onerror = () => {
            dom.src = options.value
          }
        } else {
          const img = dom.querySelector('img')
          // 判断是否为空
          if (img) {
            img.onerror = () => {
              img.src = options.value
            }
          }
        }
      },
      // 更新数据完毕后执行
      // inserted钩子函数只会执行一次， 但是只要组件初始化更新数据就会进入componentUpdated函数
      componentUpdated(dom, options) {
        dom.src = dom.src || options.value
      }
    })
  }
}
